<template>
  <div class="profile-header">
    <a-avatar :src="userInfo?.face || avatarUrl" :size="64" />
    <div class="user-info">
      <h2>{{ userInfo?.nick }}</h2>
      <p>{{ userInfo?.introduction }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { userStore } from '@/stores/user'
import { watch, ref } from 'vue'

const store = userStore()
const userInfo = ref(store.userInfo)
const avatarUrl = new URL('@/assets/imgs/default-head-1.webp', import.meta.url).href

watch(() => store.userInfo, (newUserInfo) => {
  userInfo.value = newUserInfo
}, { deep: true })
</script>

<style lang="scss" scoped>
.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background: url('@/assets/imgs/profile-bg.webp') no-repeat;
  background-size: 100% 100%;
  width: 100%;

  .user-info {
    margin-left: 20px;

    h2 {
      margin: 0;
      font-size: 18px;
    }

    p {
      margin: 5px 0 0;
      color: #666;
    }
  }
}
</style>
